<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/index.css"/>
	<script src="./js/jquery-3.2.1.min.js"></script>
	<link rel="stylesheet" href="./css/upload.css">
	<!--退出登录-->
	<script src="js/loginOut.js"></script>
    <title>资源上传</title>
</head>
<body>
    <header>
    	<div class="lf">
    		<a class="home" href="index.html">系统首页</a>
    		<!-- <a href="bbs.html">论坛</a> -->
    		<a href="upload.html">上传资料</a>
    	</div>
    	<div id="search">
    		<input type="text" name="name" 
    			placeholder="请输入要搜索的资源" autocomplete="off"/><a class="search btn">搜索</a>
    	</div>
    	
    	<div class="rf">
    		<div class="email-info">
				<b>99</b>
				<ul class="email-list">
					<li><a href="./message.html">官方<b>0</b></a></li>
					<li><a href="./message.html">通知<b>0</b></a></li>
					<li><a href="./message.html">私信<b>0</b></a></li>
				</ul>
			</div>
    		<a class="info" href="personal.html">个人中心</a>
    		<a class="cols" href="shoucang.html">收藏</a>
    		<a class="exit">退出登录</a>
    	</div>
    </header>
	
	<article>
		<!-- 网站主体 -->
		<div id="main">
			<section class="ct">

				<!-- 上传表单-->
				<div class="upload">
					<h1>上传资源<em>声明：请确保您上传的内容合法合规，涉及侵权内容将会被移除，详见<a>《爱下载资源共享规则》</a></em></h1>
					<form   enctype="multipart/form-data" id="formData">
						
						<p class="file">
							<input type="file" name="file" id="fileInput" >
							<span class="t1 f_name" >点击上传、文件小于1000MB（请不要上传存在侵权的资源哦！）</span><a>&nbsp;&nbsp;</a>
							<img src="images/成功.png" class="success-img" style="display: none;vertical-align: top">
							<!--							<span class="t2">-->
							<!--								<img src="./images/zip.svg" />-->
							<!--								<b>房产物业管理系统.zip</b>-->
<!--													<progress value="100" max="100"></progress>-->
							<!--								<a>重新上传</a>-->
							<!--							</span> -->
						</p>
						
						<p>
							<label><em>*</em>资源名称：</label>
							<input class="upt" type="text" name="resourceName" value="" placeholder="请输入资源名" />
							<em class="noNull">资源名称不可为空！</em> <!-- 显示错误信息  -->
							<em class="noLength">名称长度为1~10位！</em>
							<em class="zwf"></em>
<!--							<em class="noLength>名称长度为1~10位！</em> -->
						</p>
						
						<p class="zyms">
							<label>资源描述：</label>
							<textarea  class="area" 
								placeholder="简要介绍一下资源内容" name="describe"></textarea>
						</p>
						
						<p>
							<label><em>*</em>关键词：</label>
							<span class="key-tag" name="label">
								<a class="key" >
									<span class="tag test">清纯</span>
									<span class="tag">可爱</span>
									<span class="tag">甜美</span>
									<!-- 单击添加标签后、产生的效果 -->
<!--									 <input type="text" id="tar" style="display: none"/>-->
								</a>
								<span class="key-tag-msg">
									<button type="button" class="keywords add">添加标签</button>
									<i class="lb">按回车键创建标签</i>
								</span>
							</span>
							
							<span class="source-tag-msg">最多添加5个标签，每个标签不超过16个字</span>
						</p>
						
						<div class="source-type-div">
							<p class="class-p">
								<label>所属分类：</label>
								<input class="upt source-type source-type-down" type="text" name="resource_type" readonly placeholder="请选择" />
								<em class="class-em">请选择所属分类！</em>
							</p>
							<div class="class-zwf"></div>
							<div class="source-type-list">
								<select size="99999" class="one">
								</select>
								<select class="two" size="99999">
								</select>
							</div>

						</div>
						
						<p>
							<label><em>*</em>资源分：</label>
							<select class="upt" id="sel" name="score">
								<option selected="selected">0</option>
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
						</p>
						
						<p class="code-p">
                        <label>验证码：</label>
                        <input id="code" class="upt captcha" type="text" name="code"
                               value="" placeholder="请输入验证码,如果看不清，点击验证码进行刷新"/>
                       <img class="captcha"  id="cap" src="checkCode" />
                        <em class="no_code">验证码错误！</em>
                    </p>
						<div class="code-zwf"></div>
						<p class="btn-p"><label class="btn"><a class="btn">提交</a></label></p>
					</form>

				</div>
			</section>
		</div>
	</article>
	<div class="success"><img src="images/成功.png">上传成功！</div>


		<div class="overlay" id="overlay">
			<div class="loader">
				<img src="./images/等待效果图.gif" alt="等待中动画">
			</div>
		</div>

	<footer>
		<p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
		<p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
		<p class="num">沪ICP备14048333号</p>
	</footer>
	
	<script>
		$(function(){


			$("#showLoader").click(function() {
				$("#overlay").fadeIn();
				// 模拟3秒后隐藏等待中动画
				setTimeout(function() {
					$("#overlay").fadeOut();
				}, 3000);
			});



			//分类点击事件
			var isHidden=true;//初始状态为隐藏
			$(".source-type").on("click", function(event){
				if (isHidden){
					$(".source-type-list").show();
					isHidden=false;
				}else {
					$(".source-type-list").hide();
					isHidden=true;
				}
				event.stopPropagation();
			})

			// 获取文件上传元素和文件名显示区域
			const fileInput = document.getElementById('fileInput');
			const fileDisplay = document.querySelector('#main .upload p.file');

			// 监听文件上传元素的变化事件
			fileInput.addEventListener('change', function() {
				if (fileInput.files.length > 0) {
					const fileName = fileInput.files[0].name;
					$("#main .upload  span.t1")[0].textContent = fileName;
				}
			});


			//输入资源名称失去焦点事件
			$(".upt").blur(function (){
				let a = $(this).val();
				if (a.length>1&&a.length<10){
					$(".zwf").show();
					$(".noLength").hide();
					$(".noNull").hide();
				}
			})
			//关闭分类选择收集信息
			var collect = function (){

			}

			$(document).on("keydown click", function(event){
				if (event.keyCode === 27 && event.type == 'keydown' ||
						(!$('.source-type-list').has(event.target).length && event.type == 'click')) {
					console.log("123")
					$(".source-type-list").hide();
				}
			})

			$("#fileInput").change(function (){
				 $(".chongxin").remove();
				 $("#jindu").remove();
				 $(".success-img").css("display","none");
				 $(".file").append(`<a>&nbsp;&nbsp;</a><progress value="100" max="100" id="jindu"></progress><a class="chongxin">&nbsp;&nbsp;&nbsp;&nbsp; 重新上传</a>`);
				 let f= $(".t1").text();
				 var houzui = f.substring(f.lastIndexOf(".")+1,f.indexOf("M"));

				 //加载动画
				startProgressAnimation();
				console.log(houzui)
				 //创建一个新的Image元素
				var img = new Image();
				img.src=`images/${houzui}.svg`;

				img.onerror =function (){
					// 图片加载失败时设置为 "unknow" 图片
					$(".f_name").css("background-image", `url('images/unknow.svg')`);
				}

				img.onload = function () {
					// 图片加载成功时设置背景图片
					$(".f_name").css("background-image", `url('images/${houzui}.svg')`);
				};

			})

			//进度条动画
			function startProgressAnimation() {
				var progressBar = document.querySelector("progress");
				var duration = 3000; // 动画持续时间（以毫秒为单位）
				var interval = 10; // 更新间隔时间（以毫秒为单位）
				var step = (interval / duration) * 100;
				var value = 1;

				var progressInterval = setInterval(function () {
					if (value <= 100) {
						progressBar.value = value;
						value += step;
					} else {
						clearInterval(progressInterval);
						// 动画完成后，替换为图片
						progressBar.style.display = "none"; // 隐藏进度条
						$(".success-img").fadeIn(1000);
					}
				}, interval);
			}

			//验证码刷新
			$('#cap').click(function (event){
				$('#cap').prop("src","checkCode?a="+new Date().getTime());
				event.stopPropagation();
			})
			//阻止点击文本框触发验证码刷新
			$('#code').click(function(event) {
				return
				event.stopPropagation(); // 阻止事件冒泡
			});

			var init = function (){
				$.get("download/init",function (data){
					console.log(data)
					strOne ='';
					strTwo ='';
					for (let i = 0; i < data.length; i++) {
						let oneTitle =data[i].fileClass.f_title;
						strOne +=`<option id="t${i}">${oneTitle}</option>`;
						for (const twoTitle of data[i].list) {
							strTwo+=`<option class="t${i}" id="f${twoTitle.id}" >${twoTitle.f_title}</option>`
						}
					}
					console.log(strOne)
					$(".one").html(strOne);
					$(".two").html(strTwo);
				})
			}
			$(".source-type-down").blur(function (){
				if($(this).val()!=""){
					$(".class-zwf").show();
					$(".class-em").hide();
				}
			})

			//记录文件id
			var fid;



			//发送请求
			$(".btn").click(function (event){

				// 显示上传提示框
				$("#overlay").show();


				var flag= true;
				//资源名是否匹配
				if ($(".upt").val()==""){
					$(".noLength").hide();
					$(".zwf").hide();
					$(".noNull").fadeIn(100);
					console.log("bb")
					flag=false;
				}

				if ($(".upt").val().length>10){
					$(".noNull").hide();
					$(".zwf").hide();
					$(".noLength").fadeIn(100);
					console.log("aa")
					flag=false;
				}
				//是否选择分类
			   if ($(".source-type-down").val()==""){
					$(".class-em").fadeIn(100);
					$(".class-zwf").hide();
				    flag=false;
			   }

					var formData = new FormData($("#formData")[0]);
					let tags ="";
					//拿到所有标签
					$(".tag").each(function (){
						tags+=$(this).text()+"-";
					})
					tags=tags.substring(0,tags.length-1)
				//拿到用户输入的验证码
				    var code = $("#code").val();
					//记录文件id
					formData.append("fid",fid)
					//记录文件标签
					formData.append("tags",tags)
				    //记录验证码，方法最前面
				    formData.append("code",code)


				//给出提交中的提示
				// 显示上传提示框








				//防止ajax异步发送
				if (flag){
					$.ajax({
						//async:false,
						cache:false,
						type:"post",
						data:formData,
						url:"download/upload",
						dataType:"json",
						contentType:false,
						processData:false,
						success:function (data){
							// 隐藏等待提示动画
							$("#overlay").fadeOut();

							if (data.code==815){
								$(".code-zwf").hide();
								$(".no_code").fadeIn(100);
							}
							if (data.code==816){




								$(".success").fadeIn(500);
								setTimeout(function (){
									$(".success").fadeOut(2000);
									location.href="index.html"
								},2000)
								$(".code-zwf").show();
								$(".no_code").hide();

							}
							if (data.code==822){
								alert("文件过大！")
							}
							console.log("success")
						},
						error:function (){
							console.log("error")

							//隐藏等待提示动画
							$("#overlay").fadeOut();
						}
					})
				}







				event.stopPropagation();
			})

			//分类点击展示
			$(".one").on("click","option",function (data){
				var index = $(this).prop("id")
				$(`.${index}`).siblings().addClass("none");
				$(`.${index}`).removeClass("none")
			})

			//二级分类
			$(".two").on("click","option",function (){
				fid=(Number)($(this).prop("id").substring(1));
				let a  = $(this).prop("class");
				let one= $(`#${a}`).val();
				console.log(one)
				console.log($(this).val())
				$(".class-em").hide();
				$(".class-zwf").show();
				//获取到文件分类
				let  str = one+"-"+$(this).val()
				$(".source-type-down").val(str)
			})


			//添加标签
			$(".keywords").click(function (){
				//判断输入框是否存在
				if ($("#tar").length==1){
					return;
				}

				$(".key").append(` <input type="text" id="tar"/>`);
				if ($(".tag").length==4){
					$(".lb").css("display","none");
					$(".keywords").css("display","none");
					return;
				}
			});


			//标签按下回车

			$(".key").on("keydown","#tar",function (e){
				if (e.key==="Enter"){
					var tagValue = $(this).val();
					//判断内容是否为空
					if (tagValue==""){
						$(this).remove();
						if ($(".tag").length==4){
							$(".keywords").fadeIn(100);
						}
						return;
					}
				    $(".key").append(`<span class="tag">${tagValue}</span>`)
					$(this).remove();
				}
			})


			//删除标签
			$(".key").on("click",".tag",function (){
				//删除内容并隐
				$(this).remove();
				if ($(".tag").length<5){
					$(".lb").fadeIn(100);
					$(".keywords").fadeIn(100);
				}
			})








			//初始化
			init();




		})
		
	</script>
    
</body>

</html>